今天，要來學習 to-do app 中的 Action

先在 js 資料夾下創建一個 actions 資料夾，裡面新增一個 TodoActions.js
在 action 裡，我們需要的就是 dispatcher
因此第一行先把 dispather 引入

import dispatcher from "../dispatcher";

建立 createTodo function

ES5 的寫法會是這樣：

export default{
    createTodo: function(){
    
    }
}

而 ES6 的寫法合併成一行，精簡許多：

export function createTodo() {
  
}

當我們新增一個 to-do text 時，我們會把它 dispatch 到一個 action 或 event，在 createTodo 中加上 dispatcher，要傳的屬性值為 text

export function createTodo(text) {
  dispatcher.dispatch({
    type: "CREATE_TODO",
    text,
  });
}

刪除的 function 也是做同樣的事情，type 改成 "DELETE_TODO"，傳遞的屬性值為要刪除的 to-do 事件的 id。

export function deleteTodo(id) {
  dispatcher.dispatch({
    type: "DELETE_TODO",
    id,
  });
}

Todo component

在 Todo component 裡 import 剛剛寫的 Action

import * as TodoActions from "../actions/TodoActions";

接著在要渲染的內容裡放上 create button

<button onClick={this.reloadTodos.bind(this)}>Reload!</button>

用 onClick 去綁定 create function

測試綁定 createTodo 結果

createTodo(){
  TodoActions.createTodo(Date.now());
 }

Asynchronous & AJAX action

未完。。。